<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部署管理 - DevOps平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <style>
        .deployment-card {
            transition: all 0.3s ease;
        }
        .deployment-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .status-running {
            animation: pulse 2s infinite;
        }
        .progress-bar {
            transition: width 0.5s ease;
        }
        .deployment-timeline {
            position: relative;
        }
        .deployment-timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e5e7eb;
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="deployment">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <a href="index.html" class="btn btn-ghost text-xl">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回主页
                </a>
            </div>
            <div class="navbar-center">
                <h1 class="text-2xl font-bold">部署管理中心</h1>
            </div>
            <div class="navbar-end">
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn btn-ghost">
                        <i class="fas fa-user-circle text-2xl"></i>
                    </div>
                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a><i class="fas fa-user mr-2"></i>个人设置</a></li>
                        <li><a><i class="fas fa-cog mr-2"></i>系统配置</a></li>
                        <li><a><i class="fas fa-sign-out-alt mr-2"></i>退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="container mx-auto px-4 py-8">
            <!-- 快速操作面板 -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
                <div class="card bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">新建部署</h2>
                                <p class="text-sm opacity-90">创建新的部署任务</p>
                            </div>
                            <button class="btn btn-circle btn-outline border-white text-white hover:bg-white hover:text-blue-600" @click="showNewDeployment = true">
                                <i class="fas fa-plus text-xl"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card bg-gradient-to-r from-green-500 to-green-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">运行中</h2>
                                <p class="text-2xl font-bold">{{ runningDeployments }}</p>
                            </div>
                            <i class="fas fa-play-circle text-3xl opacity-80"></i>
                        </div>
                    </div>
                </div>

                <div class="card bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">等待中</h2>
                                <p class="text-2xl font-bold">{{ pendingDeployments }}</p>
                            </div>
                            <i class="fas fa-clock text-3xl opacity-80"></i>
                        </div>
                    </div>
                </div>

                <div class="card bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">今日部署</h2>
                                <p class="text-2xl font-bold">{{ todayDeployments }}</p>
                            </div>
                            <i class="fas fa-calendar-day text-3xl opacity-80"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 部署列表 -->
            <div class="card bg-base-100 shadow-xl mb-8">
                <div class="card-body">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="card-title text-2xl">
                            <i class="fas fa-rocket text-primary mr-2"></i>
                            部署任务列表
                        </h2>
                        <div class="flex space-x-2">
                            <select class="select select-bordered" v-model="filterStatus">
                                <option value="">全部状态</option>
                                <option value="running">运行中</option>
                                <option value="success">成功</option>
                                <option value="failed">失败</option>
                                <option value="pending">等待中</option>
                            </select>
                            <button class="btn btn-primary" @click="refreshDeployments">
                                <i class="fas fa-sync-alt mr-2"></i>
                                刷新
                            </button>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div v-for="deployment in filteredDeployments" :key="deployment.id" 
                             class="deployment-card border border-base-300 rounded-lg p-4">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <h3 class="font-bold text-lg">{{ deployment.name }}</h3>
                                    <p class="text-sm text-base-content/70">{{ deployment.environment }}</p>
                                </div>
                                <div class="badge" :class="getStatusClass(deployment.status)">
                                    <i :class="getStatusIcon(deployment.status)" class="mr-1"></i>
                                    {{ getStatusText(deployment.status) }}
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="flex justify-between text-sm mb-1">
                                    <span>部署进度</span>
                                    <span>{{ deployment.progress }}%</span>
                                </div>
                                <progress class="progress" :class="getProgressClass(deployment.status)" 
                                         :value="deployment.progress" max="100"></progress>
                            </div>

                            <div class="grid grid-cols-2 gap-4 text-sm mb-3">
                                <div>
                                    <span class="text-base-content/70">版本:</span>
                                    <span class="font-semibold ml-1">{{ deployment.version }}</span>
                                </div>
                                <div>
                                    <span class="text-base-content/70">分支:</span>
                                    <span class="font-semibold ml-1">{{ deployment.branch }}</span>
                                </div>
                                <div>
                                    <span class="text-base-content/70">开始时间:</span>
                                    <span class="font-semibold ml-1">{{ deployment.startTime }}</span>
                                </div>
                                <div>
                                    <span class="text-base-content/70">持续时间:</span>
                                    <span class="font-semibold ml-1">{{ deployment.duration }}</span>
                                </div>
                            </div>

                            <div class="flex justify-between items-center">
                                <div class="flex items-center space-x-2">
                                    <img :src="deployment.avatar" :alt="deployment.user" class="w-6 h-6 rounded-full">
                                    <span class="text-sm">{{ deployment.user }}</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="btn btn-sm btn-outline" @click="viewLogs(deployment.id)">
                                        <i class="fas fa-file-alt mr-1"></i>
                                        日志
                                    </button>
                                    <button class="btn btn-sm btn-outline" @click="viewDetails(deployment.id)">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        详情
                                    </button>
                                    <button v-if="deployment.status === 'running'" 
                                            class="btn btn-sm btn-error" @click="stopDeployment(deployment.id)">
                                        <i class="fas fa-stop mr-1"></i>
                                        停止
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 部署统计 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 部署趋势图 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-chart-line text-info mr-2"></i>
                            部署趋势
                        </h2>
                        <canvas id="deploymentTrendChart" width="400" height="200"></canvas>
                    </div>
                </div>

                <!-- 成功率统计 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-chart-pie text-success mr-2"></i>
                            成功率统计
                        </h2>
                        <canvas id="successRateChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新建部署模态框 -->
        <div v-if="showNewDeployment" class="modal modal-open">
            <div class="modal-box w-11/12 max-w-2xl">
                <h3 class="font-bold text-lg mb-4">
                    <i class="fas fa-plus-circle text-primary mr-2"></i>
                    新建部署任务
                </h3>
                
                <div class="space-y-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">应用名称</span>
                        </label>
                        <select class="select select-bordered" v-model="newDeployment.app">
                            <option value="">选择应用</option>
                            <option value="user-service">用户服务</option>
                            <option value="order-service">订单服务</option>
                            <option value="payment-service">支付服务</option>
                            <option value="web-frontend">前端应用</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">部署环境</span>
                        </label>
                        <select class="select select-bordered" v-model="newDeployment.environment">
                            <option value="">选择环境</option>
                            <option value="development">开发环境</option>
                            <option value="testing">测试环境</option>
                            <option value="staging">预发布环境</option>
                            <option value="production">生产环境</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">分支/标签</span>
                        </label>
                        <input type="text" class="input input-bordered" v-model="newDeployment.branch" 
                               placeholder="例如: main, develop, v1.2.3">
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">部署说明</span>
                        </label>
                        <textarea class="textarea textarea-bordered" v-model="newDeployment.description" 
                                  placeholder="请输入部署说明..."></textarea>
                    </div>

                    <div class="form-control">
                        <label class="cursor-pointer label">
                            <span class="label-text">自动回滚</span>
                            <input type="checkbox" class="checkbox checkbox-primary" v-model="newDeployment.autoRollback">
                        </label>
                    </div>
                </div>

                <div class="modal-action">
                    <button class="btn btn-ghost" @click="showNewDeployment = false">取消</button>
                    <button class="btn btn-primary" @click="createDeployment">
                        <i class="fas fa-rocket mr-2"></i>
                        开始部署
                    </button>
                </div>
            </div>
        </div>

        <!-- 部署详情模态框 -->
        <div v-if="showDeploymentDetails" class="modal modal-open">
            <div class="modal-box w-11/12 max-w-4xl">
                <h3 class="font-bold text-lg mb-4">
                    <i class="fas fa-info-circle text-info mr-2"></i>
                    部署详情 - {{ selectedDeployment.name }}
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 基本信息 -->
                    <div class="space-y-4">
                        <h4 class="font-semibold text-lg">基本信息</h4>
                        <div class="bg-base-200 p-4 rounded-lg space-y-2">
                            <div class="flex justify-between">
                                <span>部署ID:</span>
                                <span class="font-mono">{{ selectedDeployment.id }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>状态:</span>
                                <div class="badge" :class="getStatusClass(selectedDeployment.status)">
                                    {{ getStatusText(selectedDeployment.status) }}
                                </div>
                            </div>
                            <div class="flex justify-between">
                                <span>环境:</span>
                                <span>{{ selectedDeployment.environment }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>版本:</span>
                                <span>{{ selectedDeployment.version }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>分支:</span>
                                <span>{{ selectedDeployment.branch }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 部署步骤 -->
                    <div class="space-y-4">
                        <h4 class="font-semibold text-lg">部署步骤</h4>
                        <div class="deployment-timeline space-y-4">
                            <div v-for="(step, index) in deploymentSteps" :key="index" 
                                 class="flex items-start space-x-3 relative">
                                <div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center z-10"
                                     :class="getStepClass(step.status)">
                                    <i :class="getStepIcon(step.status)" class="text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <h5 class="font-semibold">{{ step.name }}</h5>
                                    <p class="text-sm text-base-content/70">{{ step.description }}</p>
                                    <p class="text-xs text-base-content/50">{{ step.duration }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-action">
                    <button class="btn btn-ghost" @click="showDeploymentDetails = false">关闭</button>
                    <button class="btn btn-primary" @click="viewLogs(selectedDeployment.id)">
                        <i class="fas fa-file-alt mr-2"></i>
                        查看日志
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    showNewDeployment: false,
                    showDeploymentDetails: false,
                    filterStatus: '',
                    selectedDeployment: {},
                    newDeployment: {
                        app: '',
                        environment: '',
                        branch: '',
                        description: '',
                        autoRollback: false
                    },
                    deployments: [
                        {
                            id: 'deploy-001',
                            name: '用户服务',
                            environment: '生产环境',
                            status: 'running',
                            progress: 75,
                            version: 'v2.1.3',
                            branch: 'main',
                            startTime: '14:30',
                            duration: '5分钟',
                            user: '张三',
                            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhang'
                        },
                        {
                            id: 'deploy-002',
                            name: '订单服务',
                            environment: '测试环境',
                            status: 'success',
                            progress: 100,
                            version: 'v1.8.2',
                            branch: 'develop',
                            startTime: '13:45',
                            duration: '8分钟',
                            user: '李四',
                            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=li'
                        },
                        {
                            id: 'deploy-003',
                            name: '支付服务',
                            environment: '预发布环境',
                            status: 'failed',
                            progress: 45,
                            version: 'v3.0.1',
                            branch: 'release/3.0',
                            startTime: '12:20',
                            duration: '3分钟',
                            user: '王五',
                            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wang'
                        },
                        {
                            id: 'deploy-004',
                            name: '前端应用',
                            environment: '开发环境',
                            status: 'pending',
                            progress: 0,
                            version: 'v1.5.0',
                            branch: 'feature/new-ui',
                            startTime: '等待中',
                            duration: '-',
                            user: '赵六',
                            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhao'
                        }
                    ],
                    deploymentSteps: [
                        { name: '代码检出', description: '从Git仓库获取代码', status: 'completed', duration: '30秒' },
                        { name: '依赖安装', description: '安装项目依赖', status: 'completed', duration: '2分钟' },
                        { name: '代码构建', description: '编译和打包', status: 'completed', duration: '1分钟' },
                        { name: '单元测试', description: '执行自动化测试', status: 'running', duration: '进行中' },
                        { name: '镜像构建', description: '构建Docker镜像', status: 'pending', duration: '等待中' },
                        { name: '部署发布', description: '部署到Kubernetes', status: 'pending', duration: '等待中' }
                    ]
                }
            },
            computed: {
                filteredDeployments() {
                    if (!this.filterStatus) return this.deployments;
                    return this.deployments.filter(d => d.status === this.filterStatus);
                },
                runningDeployments() {
                    return this.deployments.filter(d => d.status === 'running').length;
                },
                pendingDeployments() {
                    return this.deployments.filter(d => d.status === 'pending').length;
                },
                todayDeployments() {
                    return this.deployments.length;
                }
            },
            mounted() {
                this.initCharts();
            },
            methods: {
                getStatusClass(status) {
                    const classes = {
                        'running': 'badge-warning status-running',
                        'success': 'badge-success',
                        'failed': 'badge-error',
                        'pending': 'badge-info'
                    };
                    return classes[status] || 'badge-ghost';
                },
                getStatusIcon(status) {
                    const icons = {
                        'running': 'fas fa-spinner fa-spin',
                        'success': 'fas fa-check',
                        'failed': 'fas fa-times',
                        'pending': 'fas fa-clock'
                    };
                    return icons[status] || 'fas fa-question';
                },
                getStatusText(status) {
                    const texts = {
                        'running': '运行中',
                        'success': '成功',
                        'failed': '失败',
                        'pending': '等待中'
                    };
                    return texts[status] || '未知';
                },
                getProgressClass(status) {
                    const classes = {
                        'running': 'progress-warning',
                        'success': 'progress-success',
                        'failed': 'progress-error',
                        'pending': 'progress-info'
                    };
                    return classes[status] || 'progress-ghost';
                },
                getStepClass(status) {
                    const classes = {
                        'completed': 'bg-success text-white',
                        'running': 'bg-warning text-white',
                        'pending': 'bg-base-300 text-base-content',
                        'failed': 'bg-error text-white'
                    };
                    return classes[status] || 'bg-base-300';
                },
                getStepIcon(status) {
                    const icons = {
                        'completed': 'fas fa-check',
                        'running': 'fas fa-spinner fa-spin',
                        'pending': 'fas fa-clock',
                        'failed': 'fas fa-times'
                    };
                    return icons[status] || 'fas fa-question';
                },
                createDeployment() {
                    if (!this.newDeployment.app || !this.newDeployment.environment) {
                        alert('请填写必要信息');
                        return;
                    }
                    
                    const newDeploy = {
                        id: 'deploy-' + Date.now(),
                        name: this.newDeployment.app,
                        environment: this.newDeployment.environment,
                        status: 'pending',
                        progress: 0,
                        version: 'v1.0.0',
                        branch: this.newDeployment.branch || 'main',
                        startTime: new Date().toLocaleTimeString(),
                        duration: '-',
                        user: '当前用户',
                        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current'
                    };
                    
                    this.deployments.unshift(newDeploy);
                    this.showNewDeployment = false;
                    this.newDeployment = {
                        app: '',
                        environment: '',
                        branch: '',
                        description: '',
                        autoRollback: false
                    };
                    
                    // 模拟部署进度
                    setTimeout(() => {
                        const deploy = this.deployments.find(d => d.id === newDeploy.id);
                        if (deploy) {
                            deploy.status = 'running';
                            this.simulateProgress(deploy);
                        }
                    }, 1000);
                },
                simulateProgress(deployment) {
                    const interval = setInterval(() => {
                        deployment.progress += Math.random() * 20;
                        if (deployment.progress >= 100) {
                            deployment.progress = 100;
                            deployment.status = Math.random() > 0.2 ? 'success' : 'failed';
                            deployment.duration = Math.floor(Math.random() * 10 + 3) + '分钟';
                            clearInterval(interval);
                        }
                    }, 1000);
                },
                viewDetails(deploymentId) {
                    this.selectedDeployment = this.deployments.find(d => d.id === deploymentId);
                    this.showDeploymentDetails = true;
                },
                viewLogs(deploymentId) {
                    window.open(`logs.html?deployment=${deploymentId}`, '_blank');
                },
                stopDeployment(deploymentId) {
                    const deployment = this.deployments.find(d => d.id === deploymentId);
                    if (deployment && confirm('确定要停止这个部署任务吗？')) {
                        deployment.status = 'failed';
                        deployment.duration = '已停止';
                    }
                },
                refreshDeployments() {
                    // 模拟刷新
                    alert('部署列表已刷新！');
                },
                initCharts() {
                    // 部署趋势图
                    const trendCtx = document.getElementById('deploymentTrendChart').getContext('2d');
                    new Chart(trendCtx, {
                        type: 'line',
                        data: {
                            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            datasets: [{
                                label: '部署次数',
                                data: [12, 19, 15, 25, 22, 18, 24],
                                borderColor: 'rgb(59, 130, 246)',
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });

                    // 成功率统计图
                    const successCtx = document.getElementById('successRateChart').getContext('2d');
                    new Chart(successCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['成功', '失败'],
                            datasets: [{
                                data: [85, 15],
                                backgroundColor: [
                                    'rgb(34, 197, 94)',
                                    'rgb(239, 68, 68)'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }
                    });
                }
            }
        }).mount('#deployment');
    </script>
</body>
</html>